<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id='ng-app' ng-app="angular-google-maps-example">
<head>
    <meta charset="UTF-8">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link href="assets/stylesheets/example.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="controller">
<div class="page-title ">
    <h2 ng-cloak>angular-google-maps example {{version}}</h2>
</div>
<div class="container">
    <div class="row">
        <ui-gmap-google-map class="col-md-12"
                            center="map.center"
                            zoom="map.zoom"
                            dragging="map.dragging"
                            >



            <ui-gmap-window
                    idKey="map.southCarolina.id"
                    coords="map.southCarolina"
                    show="map.southCarolina.doShow"
                    >
                <div>
                    Normal Standalone Window
                    <br>
                    using show to open close the window state.
                </div>
            </ui-gmap-window>

            <ui-gmap-windows
                    models="map.californias"
                    coords="'self'" icon="'icon'"
                    fit="true"
                    show="'doShow'"
                    >
                <div>
                    Normal Standalone Windows
                    <br>
                    using show to open close the window state.
                </div>
            </ui-gmap-windows>

            <!-- BEGIN TRANSCLUSION not the most memory friendly if large-->
            <ui-gmap-marker
                    idKey="map.virginia.id"
                    coords="map.virginia"
                    >
                <ui-gmap-window>
                    <div>
                        Normal Standalone Window (No show state)
                    </div>
                </ui-gmap-window>
            </ui-gmap-marker>

            <ui-gmap-markers
                    models="map.texases"
                    coords="'self'">
                <ui-gmap-windows>
                    <div>
                        Windows Should Open via marker click. NO SHOW state.
                    </div>
                </ui-gmap-windows>
            </ui-gmap-markers>
            <!-- END TRANSCLUSION -->


            <!-- MARKERS EFFICIENT with only one or few WINDOW(s) to show at a time-->
            <ui-gmap-markers
                    models="map.canadas"
                    coords="'self'"
                    events="map.markerEvents">
            </ui-gmap-markers>
            <!--ng-repeat="w in map.openedCanadaWindows"-->
            <ui-gmap-window
                    idKey="map.openedCanadaWindows.id"
                    coords ='map.openedCanadaWindows'
                    show="map.openedCanadaWindows.doShow"
                    closeclick="map.openedCanadaWindows.closeClick">
                <div>
                    Single Window popped into mem as needed.
                    <br>
                    {{map.openedCanadaWindows.latitude}}, {{map.openedCanadaWindows.longitude}}
                </div>
            </ui-gmap-window>

        </ui-gmap-google-map>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="../website_libs/dev_deps.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
<script src="assets/scripts/controllers/issue-1218-window-windows-open-close.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
</body>

</html>
